<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <div>345</div>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <div>
            123
        </div>
    </ul>
    <script>
        // 有1000 li 需要给每一个li绑定click事件  如何办到 ？？ ---》事件委托 
        // 事件委托：把事件委托给父级执行；
        // 1.性能更好 2.动态的子元素也会有事件
        var ulEle = document.querySelector("ul");
        ulEle.onclick = function(e){
            // console.log(111);
            var target = e.target || e.srcElement;
            // console.log(target)
            // console.log( target.nodeName)
            if(target.nodeName==="LI"){
                console.log("点击了Li元素");
            }
        }      
        // var lis = document.querySelectorAll("li");
        // lis.forEach(function(li){
        //     li.onclick = function(){
        //         console.log("li");
        //     }
        // })
        var myli = document.createElement("li");
        myli.innerHTML = "6";
        ulEle.appendChild(myli);
        



    </script>
</body>
</html>